<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="author" content="m.jd.com">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/base2013.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/my.css?r=2" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/header.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/product.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/bottom.css" charset="gbk" />
    <link rel="stylesheet" type="text/css"
          href="/resources/wap/css/input.css" charset="gbk" />

    <script src="/resources/js/jquery-1.11.1.min.js"></script>
    <script src="/resources/js/self.js?r=1"></script>

    <style type="text/css">
        .norm-div{
            background: #fff;
            padding: 10px;
            border-radius: 10px;
        }
        .norm-div .price{
            width: 100px;
            height: 25px;
            border-width:1px;
            line-height:normal;
        }
        [priceType]{
            width:100%;
        }
        [norm]{
            float: left;
            margin-left: 20px;
            border: 1px solid;
            height: 30px;
            padding: 5px;
            border-radius: 5px;

        }
        .select-norm{
            color:#00aeef;
        }
        button{
            background: #00aeef;
            width: 100px;
            height: 50px;
            border: none;
        }
        .supplier-price-div{
            background: #fff;
            padding: 10px;
            border-radius: 10px;
        }
        .buy-num{
            background: #fff;
            padding: 10px;
            border-radius: 10px;
        }
        .supplier-radio{
            width: 20px;
            height: 20px;
        }
        .supplier-name{
            min-width: 100px;
            width: 50%;
            display: block;
            float: left;
        }
        .supplier-price{
            min-width: 100px;
            width: 40%;
            display: block;
            float: right;
        }
        .material-icons img{
            width: 50px;
        }
        .totalMoney{
            background: #fff;
            padding: 10px;
            border-radius: 10px;
        }
    </style>
</head>
<body>

<header>
    <!-- 通用头 div -->
    <div id="m_common_header" style="min-height: 45px; margin-top: 0px;">
        <header class="jd-header">
            <div class="jd-header-bar">
                <div  class="jd-header-icon-back J_ping"
                      onclick="javascript:history.go(-1);">
                    <span></span>
                </div>
                <div class="jd-header-title">
                    商品以及报价
                </div>
            </div>

        </header>
    </div>
</header>
<div class="common-wrapper" id="mainLayout">

    <input name="productId" type="hidden">
    <div id="div_orderlist" class="product-div">
        <div class="product-title" style=" background: #fff;padding: 10px; border-radius: 10px" >
            <div style="width:40%;float:left;background-color: #fff;border-radius:15px;padding: 8px 10px;">
                <img name="image" style="width:100%;" src="">
            </div>
            <div style="width:56%;float: left;margin-left:4%;">
                <span name="name" class="product" style="display: block"></span>
                <span name="code" class="product" style="display: block;"></span>
            </div>
        </div>
        <div style="margin-top:20px">
            <textarea  style="width:100%;border-radius:3px;border:1px solid #ddd;" disabled name="content" class="product"></textarea>
        </div>
        <div>
            <div>规格:</div>
            <div class="norm-div">

            </div>

        </div>


        <div priceType ="same">
            <lable>报价:</lable>
            <div class="supplier-price-div">

            </div>
        </div>


        <div >
            <lable>购买数量:</lable>
            <div class="buy-num">
                <input type="text" name="num" onchange="numChange()" style="margin-left:2px" value="0"> <span class="product" name="unit"></span>
            </div>
        </div>
        <div >
            <lable>总额:</lable>
            <div class="totalMoney" >
                <span class="product" name="totalMoney"></span><span>元</span>
            </div>
        </div>
        <!--end if-->
    </div>

    <div class="toolbar tabbar tabbar-labels" style="height:10% !important;">
        <div class="toolbar-inner" style="height:100%">
            <a href="javascript:void(0);" onclick="showCart()" class="tab-link" style="width:33.33%">
                <i class="material-icons">
                    购物车
                </i>
                <!--<span class="tabbar-label">首页</span>-->
            </a>
            <a href="javascript:void(0);" onclick="addToCart()" class="tab-link" style="width:33.33%">
                <i class="material-icons">
                    加入购物车
                </i>
                <!--<span class="tabbar-label">首页</span>-->
            </a>

            <a href="javascript:void(0);" onclick="createOrder()"  class="tab-link" style="width:33.33%;float: right !important;">
                <i class="material-icons">
                    立即下单
                </i>
                <!--<span class="tabbar-label">我的</span>-->
            </a>
        </div>
    </div>

</div>
</body>
<script type="text/javascript">

    var priceMap = {};
    $().ready(function () {
        var productId =  getUrlParam("productId");
        if(!isNullOrUndefined(productId)){
            $("[name='productId']").val(productId);
        }

        loadData();
    });
    function numChange() {
        var num = $("input[name='num']").val();

        var supplierId = $("input[name='supplier']:checked").attr("data");
        var norm = $(".select-norm").attr("norm");
        var key = supplierId+"_"+norm;
        var price =  priceMap[key];
        $("[name='totalMoney']").html(price*num);
    }
    function loadData() {
        var productId =  getUrlParam("productId");
        $.ajax({
            url:"/wap/customer/product/find.do",
            data:{'id':productId},
            type:'post',
            dataType:'json',
            success:function(data){
                console.log(data);
                if(data.success){
                    initPageDate(data.data.product, '.product');
                    $("[name='image']").attr("src",data.data.product.image);
                    var norm =  data.data.productNorm;
                    priceMap = data.data.priceMap;
                    var suppliers = data.data.suppliers;
                    var defaultNorm = "";
                    if(!isNullOrUndefined(norm)){
                        var html = "";
                        var normName = norm.name;
                        var norms = norm.values.split(",");
                        $(norms).each(function (index,_norm) {
                            var defaultSelect = "";
                            if(index ==0 ){
                                defaultSelect = "class = 'select-norm'";
                                defaultNorm = _norm;
                            }

                             html = html+"<div "+defaultSelect+" norm ='"+_norm+"'>"+normName+":"+_norm+"</div>";
                        })
                        html = html +"<div style='clear: both'></div>";
                        $(".norm-div").html(html);
                        bindNormSelect();

                    }else {
                        $(".norm-div").parent().hide();
                    }

                    if(!isNullOrUndefined(suppliers)){
                        var html ="";
                        $(suppliers).each(function (index,supplier) {
                            html = html +"<div style='clear: both'>" +
                                ""+
                                "<span class='supplier-name'>" +
                                "<input class='supplier-radio' type='radio' name='supplier' data='"+supplier.id+"'>"+supplier.name+
                                "</span>"+
                                "<span  class='supplier-price' supplierId='"+supplier.id+"'></span>" +
                                "</div>";
                        });
                        html = html+"<div style='clear: both'></div>";
                        $(".supplier-price-div").html(html);
                    }else {
                        $(".supplier-price").html("没有供货商报价");
                    }
                    initPrice(defaultNorm);
                    bindSupplierChange();
                }
            }
        });
    }
    function bindNormSelect() {
        $("[norm]").click(function () {
            var norm =  $(this).attr("norm");
            $("[norm]").removeClass("select-norm");
            $(this).addClass("select-norm");
            initPrice(norm);

        })
    }
    function goBack() {
        window.history.back();
    }
    function initPrice(norm) {
        $(".supplier-price").each(function () {
            var supplierId =  $(this).attr("supplierId");
            var key = supplierId+"_"+norm;
            var price =  priceMap[key];
            $(this).html(price+"元");
            var num = $("input[name='num']").val();
            $("[name='totalMoney']").html(price*num);
        })
    }

    function addToCart() {
        var productId  = $("input[name='productId']").val();
        var num = $("input[name='num']").val();
        var supplierId = $("input[name='supplier']:checked").attr("data");
        var norm = $(".select-norm").attr("norm");
        if (strIsNull(supplierId)) {
            alert("没有选定供货商!");
            return;
        }
        if(!isNumber(num)){
            alert("购买数量必须为数字!");
            return;
        }
        var params = {"productId":productId,
            "supplierId":supplierId,
             "num":num,
             "norm":norm};
        $.ajax({
            url: "/wap/customer/cart/add.do",
            data: params,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                    alert("保存成功");
                } else {
                    alert(data.msg);
                }
            }
        });

    }
    function createOrder() {
        var productId  = $("input[name='productId']").val();
        var num = $("input[name='num']").val();
        var supplierId = $("input[name='supplier']:checked").attr("data");
        var norm = $(".select-norm").attr("norm");
        if (strIsNull(supplierId)) {
            alert("没有选定供货商!");
            return;
        }
        if(!isNumber(num)){
            alert("购买数量必须为数字!");
            return;
        }
        var params = {"productId":productId,
            "supplierId":supplierId,
            "num":num,
            "norm":norm};
        $.ajax({
            url: "/wap/customer/order/add.do",
            data: params,
            dataType: 'json',
            type: 'post',
            success: function (data) {
                console.log(data);
                if (data.success) {
                    alert("保存成功");
                } else {
                    alert(data.msg);
                }
            }
        });
    }
    function bindSupplierChange() {
        $(".supplier-radio").click(function (index,item) {
            var supplierId = $("input[name='supplier']:checked").attr("data");
            var num = $("input[name='num']").val();
            var norm = $(".select-norm").attr("norm");
            var key = supplierId+"_"+norm;
            var price =  priceMap[key];
            $("[name='totalMoney']").html(price*num);
        });
    }
    function showCart() {
        window.location.href = "cart.html";
    }
</script>
</html>